<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>昨-作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .container {
            width: 1200px;
            margin: 50px auto;
        }

        nav {
            width: 300px;
            margin: 0 auto;
            border: 1px solid #f00;
        }

        nav button {
            width: 150px;
            line-height: 44px;
            color: #f00;
            border: none;
            background-color: #fff;
            border-radius: 0;
            outline: none;
        }

        nav button.act {
            color: #fff;
            background-color: #f00;
        }

        .content {
            position: relative;
            height: 420px;
            margin-top: 50px;
            overflow: hidden;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            overflow: hidden;
            transition: left .6s ease;
        }

        .box ul {
            float: left;
            width: 50%;
        }

        .box ul li {
            float: left;
            width: 22%;
            margin-bottom: 15px;
            margin-right: 4%;
        }

        .box ul li:nth-child(4n){
            margin-right: 0;
        }

        .box ul li div {
            height: 10px;
        }

        .box ul li p {
            line-height: 30px;
            /* 超出显示 ... */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <nav></nav>
        <div class="content">

            <div class="box">
                <!-- <ul>
                    <li>
                        <div></div>
                        <h2></h2>
                        <p></p>
                        <p></p>
                        <p></p>
                        <p></p>
                    </li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul></ul> -->
            </div>
        </div>
    </div>

    <script src="../lib/data/data.js"></script>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        // console.log(data);
        var $navEle = $("nav"),
            $box = $(".box"),
            str = "";

        for(var i = 0; i < data.course.length; i ++){
            console.log(data.course[i]);
            $navEle.append("<button class='"+ (i == 0 ? "act" : "") +"'>" + data.course[i].cname + "</button>");
            // 直接生成元素后插入内容不方便，因此推荐使用拼接字符串的方式
            // $box.append("<ul></ul>");
            str += "<ul>";
                for(var j = 0; j < data.course[i].details.length; j ++){
                    var detail = data.course[i].details[j];
                    str += "<li><div style='background-color: "+ detail.color +"'></div><h2>"+ detail.title +"</h2>";
                        for(var k = 0; k < detail.pcontent.length; k ++){
                            str += "<p>"+ detail.pcontent[k] +"</p>";
                        }
                    str +="</li>";
                }
            str += "</ul>";

        }

        // $navEle.children().eq(0).addClass("act");
        $box.html(str);

        // 切换 -> box 运动
        $navEle.on("click" ,"button", function (e){
            // 标识是否是ui或者h5
            $box.css("left", $box[0].offsetLeft == 0 ? "-100%" : 0);
            // 找到激活的去掉激活
            $navEle.find(".act").removeClass("act");
            // 给点击的添加激活
            this.classList.add("act");
        })

        $box.on("mouseenter", "li", function (){
            // 给li设置文字颜色为div背景色
            $(this).css("color", this.firstElementChild.style.backgroundColor);
        })

        $box.on("mouseleave", "li", function (){
            // 给li设置文字颜色为div背景色
            $(this).css("color", "");
        })

        // mouseenter 没有冒泡  mouseover 有事件冒泡的
        // $box[0].onmouseover = function (){
        //     console.log(event.target);
        // }
    </script>
</body>
</html>